<template>
  <div class="flex p-t p-b cursor-p" @click="goInfo(info)">
    <el-row :gutter="20">
        <el-col :span="8"> 
            <div class="ad-img" style="width: 156px;height: 194px;">
                <imgView type="ad" :src="info.url" class="ad-img" />
            </div>
        </el-col>
        <el-col :span="16">
           <div class="count">
                <div>
                    <div class="title">{{ info.title }}</div>
                    <div class="desc omit-3">{{ info.desc }}</div>
                </div>
                <div>
                    <div class="price"> 
                        <div class="p1"><span class="p1-1">优惠价￥</span> <span class="p1-2">{{ info.p1 }}</span> </div>
                        <span class="p2">原价￥{{ info.p2 }}</span>
                    </div>
                    <div class="btn">
                        <div class="btn1" @click.stop="purchase(info)">立即购买</div>
                        <div class="btn2" @click.stop="trySee(info)">试看</div>
                    </div>
                </div>
                
           </div>
        </el-col>
    </el-row>
    
  </div>
</template>

<script setup>
    const props = defineProps({
        info: {
            type: Object,
            default: {
                url:'',
                title:'',
                desc:'',
                p1:'',
                p2:'',
            },
        },
    })
    
    let emit = defineEmits(["trySee"]);
    const purchase = (item) => {
        emit("purchase",item.title);
    };
    const trySee = (item) => {
        emit("trySee",item.title);
    };
    const goInfo = (item) => {
        emit("goInfo",item.title);
    };
</script>

<style lang='less' scoped>
.count{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title{
        font-size: 26px;
        font-weight: bold;
        text-align: left;
    }
    .desc{
        font-size: 14px;
        color: #8d8d8d;
        line-height: 20px;
        text-align: left;
        margin-top: 17px;
    }
    .price{
        display: flex;
        .p1{
            display: flex;
            align-items: flex-end;
            .p1-1{
                font-size: 16px;
                color: #d10b00;
            }
            .p1-2{
                font-size: 20px;
                color: #d10b00;
                font-weight: bold;
            }
            
        }
        
        .p2{
            font-size: 16px;
            margin-left: 20px;
            text-decoration: line-through;
        }
    }
    .btn{
        display: flex;
        margin-top: 25px;
        .btn1{
            width: 98px;
            height: 32px;
            line-height: 32px;
            color: #fff;
            font-size: 14px;
            background: #d10b00;
            border-radius: 30px;
        }
        .btn2{
            width: 98px;
            height: 32px;
            line-height: 32px;
            color: #d10b00;
            border:1px solid #d10b00;
            font-size: 14px;
            background: #fff2f1;
            border-radius: 30px;
            margin-left: 20px;
        }
    }
}
</style>
